<template>
  <div class="conversation flex">
    <el-scrollbar class="width-280 padding-n-10">
      <ConversationCard v-for="item in list" :key="item.id" :conversation="item"></ConversationCard>
    </el-scrollbar>
    <MessagePanel class="flex-item_f-1"></MessagePanel>
    <GroupUserPanel class="margin_l-10 width-200" v-if="active.group"></GroupUserPanel>
  </div>
</template>

<script setup>
import ConversationCard from './components/conversation-card/index.vue'
import MessagePanel from './components/message-panel/index.vue'
import GroupUserPanel from './components/group-user-panel/index.vue'

defineOptions({
  name: 'Conversation'
})

const conversationStore = useConversationStore()
const active = computed({
  get: () => {
    const activeConversation = conversationStore.active || {}
    console.log('获取active对象:', activeConversation)
    console.log('active.group:', activeConversation.group)
    console.log('active.group类型:', typeof activeConversation.group)
    return activeConversation
  },
  set: (value) => {
    console.log('设置active值:', value)
    console.log('value.group:', value.group)
    console.log('value.group类型:', typeof value.group)
    conversationStore.setActive(value)
  }
})

const list = computed(() => {
  const conversations = conversationStore.list
  
  if (conversations.length > 0) {
    conversations.forEach((item, index) => {
      if (index < 3) { // 只打印前3个会话的详细信息，避免日志过多
        console.log(`会话${index+1}是否有group:`, !!item.group)
        console.log(`会话${index+1}是否有friend:`, !!item.friend)
      }
    })
  }
  return conversations
})

onBeforeMount(() => {
  conversationStore.getList()
  console.log('初始化后的 conversationStore:', conversationStore)
  console.log('初始化后的 active:', active.value)
})
</script>

<style lang="scss" scoped>
.conversation {
}
</style>
